<template>
 <a-layout-header class="header">
    <a-menu
      @change="changeTheme"
      v-model:selectedKeys="current"
      mode="horizontal"
      :theme="theme"
      :style="{ lineHeight: '64px' }"
      class="menus"
    >
      <a-menu-item key="/home">
        <router-link to="/home" class="logo">
         <img src="@/assets/logo.png" alt="" class="logoimg">
          <div class="logotxt">博客分享</div>
        </router-link></a-menu-item
      >

      <li class="grep">
        <a-menu-item></a-menu-item>
      </li>

      <!-- 换主题 -->
      <a-menu-item key="" :style="{ height: '50p' }">
        <router-link to=""> <QuestionCircleOutlined
            :style="{ fontSize: '24px', color: '#08c' ,verticalAlign:'middle'}"
          /></router-link></a-menu-item
      >
      <!-- 通知 -->
      <a-menu-item key="" :style="{ height: '50p' }">
        <router-link to=""> <BellOutlined 
            :style="{ fontSize: '24px', color: '#08c',verticalAlign:'middle' }"
          /></router-link></a-menu-item
      >


      <a-menu-item>
        <a-switch
          :checked="theme === 'dark'"
          checked-children="dark"
          un-checked-children="light"
          @Change="changeTheme"
        />
      </a-menu-item>
    </a-menu>
  </a-layout-header>
</template>

<script setup>

import { BellOutlined, QuestionCircleOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
const current = ref(["mail"]);
const theme = ref("dark");
const changeTheme = (checked) => {
  theme.value = checked ? "dark" : "light";
};

function getTopList() {}
const topList = async () => {
  const data = await api.topList();
};
</script>

<style scoped>
.logoimg{
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.menus {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;

}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logotxt {
  text-align: center;
}

.grep {
  pointer-events: none;
  margin-left: 75%;
}
</style>
